import React, {Component} from 'react';
import {Image, PixelRatio, ScrollView, StyleSheet, Text, View} from 'react-native';
import Toast from '../component/Toast';
import NetInfo from '@react-native-community/netinfo';
import BackImage from '../component/BackImage';

const axios = require('axios');

class ComprehensiveStatisticsScene extends Component {

	static navigationOptions =({ navigation }) => ({
  		title: '综合统计',
		headerStyle: {
		  backgroundColor: 'rgba(0, 191 ,255, 0.5)',
		},
		headerBackImage:<BackImage/>, //使用组件
		headerTintColor: '#fff',
		headerTitleStyle: {
		  fontWeight: 'bold',
		}
  	});

    constructor(props){
		super(props);
		this.state = {
			ychs:0,
			yshs:0,
			wshs:0,
			sumFact:'0',
			waterCost:'0',
			quantity:'0',
			sumCharge:'0'
	 	};
	}


	//组件挂载完成后执行的方法
    componentDidMount(){
		//检测网络是否连接

		NetInfo.fetch().then(({isConnected}) => {
		    console.log('当前网络状态： ' + (isConnected ? 'online' : 'offline'));
			if(!isConnected){
				Toast.show('提示','网络连接异常，请检查网络配置！');
			}
			this.setState({isConnected});
		});
        //组件挂载后开始下载数据
        this.getData();
    }

	/*
		因为服务端modified字段代表的是时间戳，所以Max(anchor)表示客户端最近一次同步的时间，如果存在服务端modified > Max(anchor),
		说明服务端需要向客户端同步数据。
	*/
	getData(){
		let url=global.server.url+'/arrears/comprehensive';
		axios.post(url,
			{

			},
			{
				headers: {
					'Authorization': global.user.userData.sessionId,
					'withCredentials':true
				}
			}
		)
        .then(res => {
			let data=res.data[0];
        	this.setState({
				ychs:data.ychs,
				yshs:data.yshs,
				wshs:data.wshs,
				sumFact:data.sumFact,
				waterCost:data.waterCost,
				sumCharge:data.sumCharge,
				quantity:data.quantity
            });
        })
        .catch(err => {
        	Toast.show("发生异常，请稍后再试！"+err);
        })
	}

    render() {
        //加载后
        return (
			<ScrollView>
				<View style={{flex:1}}>
				<View style={styles.flex}>
				  <View style={[styles.containermiddle,styles.sbu_blue]}>
					<View style={[styles.item,styles.center]}>
					  <Text style={styles.font}>收费</Text>
					  <Image source={require('../../img/remit.gif')} style={styles.image}/>
					</View>
					<View style={[styles.item,styles.lineLeftRight]}>
						  <View style={[styles.center,styles.flex,styles.lineCenter]}>
							<Text style={styles.font}>应收笔数</Text>
						  </View>
						  <View style={[styles.center,styles.flex,styles.lineCenter]}>
							<Text style={styles.font}>已收笔数</Text>
						  </View>
						  <View style={[styles.center,styles.flex,styles.lineCenter]}>
							<Text style={styles.font}>未收笔数</Text>
						  </View>
						  <View style={[styles.center,styles.flex,styles.lineCenter]}>
							<Text style={styles.font}>总用水量</Text>
						  </View>
						  <View style={[styles.center,styles.flex,styles.lineCenter]}>
							<Text style={styles.font}>应收金额</Text>
						  </View>
						  <View style={[styles.center,styles.flex,styles.lineCenter]}>
							<Text style={styles.font}>实收金额</Text>
						  </View>
						  <View style={[styles.center,styles.flex]}>
							<Text style={styles.font}>欠费金额</Text>
						  </View>
						</View>
					<View style={styles.item}>
						<View style={[styles.center,styles.flex,styles.lineCenter]}>
						   <Text style={styles.font}>{this.state.ychs}</Text>
						 </View>
						 <View style={[styles.center,styles.flex,styles.lineCenter]}>
						   <Text style={styles.font}>{this.state.yshs}</Text>
						 </View>
						 <View style={[styles.center,styles.flex,styles.lineCenter]}>
						   <Text style={styles.font}>{this.state.wshs}</Text>
						 </View>
						<View style={[styles.center,styles.flex,styles.lineCenter]}>
						   <Text style={styles.font}>{this.state.quantity}</Text>
						 </View>
						 <View style={[styles.center,styles.flex,styles.lineCenter]}>
						   <Text style={styles.font}>{this.state.waterCost}</Text>
						 </View>
						 <View style={[styles.center,styles.flex,styles.lineCenter]}>
						   <Text style={styles.font}>{this.state.sumFact}</Text>
						 </View>
						 <View style={[styles.center,styles.flex]}>
						   <Text style={styles.font}>{this.state.sumCharge}</Text>
						 </View>
					</View>
				  </View>
				</View>
        	  </View>
			</ScrollView>
        )
    }
}

const styles=StyleSheet.create({
    sbu_blue:{
      backgroundColor: 'rgba(0, 191 ,255, 0.7)',
      borderColor:'#3D98FF',
    },
    sbu_yellow:{
    	backgroundColor: '#FC9720',
      	borderColor:'#FC9720',
    },
    topradius:{
		borderTopLeftRadius:5,
		borderTopRightRadius:5
  	},
	bottomradius:{
		borderBottomLeftRadius:5,
		borderBottomRightRadius:5
	},
	containermiddle:{
		marginTop:5,
		marginLeft:5,
		marginRight:5,
		height:115,
		flexDirection:'row',
		padding:2,
		backgroundColor:'#FF0067',
	},
    secondmenu:{
		marginTop:5,
		marginLeft:5,
		marginRight:5,
		backgroundColor:'white'
    },
    item:{
		flex:1,
		height:110,
  	},
  	center:{
		justifyContent:'center',
		alignItems:'center'
  	},
  	flex:{
    	flex:1
  	},
  	font:{
		color:'#fff',
		fontSize:14,
  	},
  	secondfont:{
		color:'black',
		fontSize:10,
  	},
  	lineLeftRight:{
		borderLeftWidth:1/PixelRatio.get(),
		borderRightWidth:1/PixelRatio.get(),
		borderColor:'#fff'
  	},
  	lineCenter:{
		borderBottomWidth:1/PixelRatio.get(),
		borderColor:'#fff'
  	},
  	menulineRight:{
		borderRightWidth:0.5/PixelRatio.get(),
		borderColor:'#d0d0d0'
  	},
  	menulineCenter:{
		borderBottomWidth:1/PixelRatio.get(),
		borderColor:'#d0d0d0'
  	},
  	image:{
		width:30,
		height:30,
		marginTop:5
  	},
  	secondimage:{
		width:20,
		height:20,
		marginBottom:4
  	},
  	wrapper: {
      	height:80,
    },
  	slide: {
		height:80,
		resizeMode: 'contain',
  	},
});
module.exports = ComprehensiveStatisticsScene;
